import { ElLoading } from 'element-plus'
import { $t } from '@/languages/index'
import { computed } from 'vue'

/* 全局请求 loading */
let loadingInstance
let needLoadingRequestCount = 0
const loadingText = computed(() => $t('common.loading_text'))
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

/**
 * @description 开启 Loading
 * */
const startLoading = () => {
  loadingInstance = ElLoading.service({
    fullscreen: true,
    lock: true,
    // text: loadingText,
    svg: svg,
    svgViewBox: '-10, -10, 50, 50',
    zIndex: 9999,
    background: 'rgba(0, 0, 0, 0.1)'
  })
}

/**
 * @description 结束 Loading
 * */
const endLoading = () => {
  needLoadingRequestCount = 0
  loadingInstance.close()
}

/**
 * @description 显示全屏加载
 * */
export const showFullScreenLoading = () => {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

/**
 * @description 隐藏全屏加载
 * */
export const tryHideFullScreenLoading = () => {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}
